<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap u-flex-1">
				<map id="addressMap" ref="addressMap" style="width: 750rpx; height: 100%;" :scale="17"
					:latitude="golat" :longitude="golng" :markers="covers" :polyline="polyline" @markertap="handleMarker">
				</map>
			</view>
			<view class="guide-box">
				<view class="u-p-30">
					<view>您的位置：{{myPoiName}}</view>
					<view>距离目的地：<text class="u-font-40">{{paths.distance/1000}}</text>千米</view>
				</view>
				<view class="guide-list">
					<scroll-view class="item u-p-l-40 u-p-r-40" :scroll-y="true">
						<view class="u-p-l-30">
							<u-time-line>
								<u-time-line-item nodeTop="2" v-for="(cell,i) in paths.steps" :key="i">
									<template v-slot:node>
										<view class="u-node" style="background: #19be6b;">
											<u-icon name="map-fill" color="#fff" :size="24"></u-icon>
										</view>
									</template>
									<template v-slot:content>
										<view>
											<view class="u-order-title">{{cell.road_name}}</view>
											<view class="u-order-desc">{{cell.instruction}}</view>
											<view class="u-order-time">{{cell.orientation}}方向</view>
										</view>
									</template>
								</u-time-line-item>
							</u-time-line>
						</view>
					</scroll-view>
				</view>
				<view class="u-p-30">
					<u-button type="primary" @click="openNavigation(golng,golat,'')">开始导航</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const img = '/static/images/logo.png';

	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 0,
				longitude: 0,
				covers: [
					// {
					// 	latitude: 23.634058,
					// 	longitude: 113.04928,
					// 	iconPath: '../../../static/location.png'
					// }, 
				],
				paths: {}, //导航路径选择
				polyline: [],
				golat: 0,
				golng: 0,
				myPoiName: ''
			}
		},
		// onReady() {
		// 	this._mapContext = uni.createMapContext("addressMap", this);

		// 	// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
		// 	this._mapContext.initMarkerCluster({
		// 		enableDefaultStyle: false,
		// 		zoomOnClick: true,
		// 		gridSize: 60,
		// 		complete(res) {
		// 			console.log('initMarkerCluster', res)
		// 		}
		// 	});

		// 	this._mapContext.on("markerClusterCreate", (e) => {
		// 		console.log("markerClusterCreate", e);
		// 	});

		// },
		onLoad(opt) {
			console.log('load')
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: res=> {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					
					this.latitude = res.latitude
					this.longitude = res.longitude
					
					this.golat = opt.lat
					this.golng = opt.lng
					
					this.myPoiName = res.address.poiName
					
					let origin= `${this.longitude},${this.latitude}` // 起点经纬度
					let destination = `${opt.lng},${opt.lat}`
					
					console.log('origin',origin)
					console.log('destination',destination)
					console.log('res',res)
					
					this.covers.push({
						id: 1,
						latitude: this.golat,
						longitude: this.golng,
						iconPath: '/static/images/location.png',
						title: '客户地址'
					})
					
					// 路线规划2.0
					this.getDriverLine(origin,destination)
				}
			});
		},
		methods: {
			getDriverLine(origin,destination) {
				const that = this
				const key = 'd1a7ea2dc24fa8ae4b0b10eac185ad5d'
				// const origin = `${longitude1},${latitude1}`
				// const destination = `${longitude2},${latitude2}`
				uni.request({
					url: `https://restapi.amap.com/v3/direction/driving?origin=${origin}&destination=${destination}&key=${key}`,
					success: (res) => {
						console.log('driving',res)
						const data = res.data.route
						var points = []
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							this.paths = data.paths[0]
							var steps = data.paths[0].steps;
							for (var i = 0; i < steps.length; i++) {
								//将每一步的数据放到points数组中
								var poLen = steps[i].polyline.split(";")
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(",")[0]),
										latitude: parseFloat(poLen[j].split(",")[1]),
									})
								}
							}
						}
						that.polyline = [{
							points: points,
							color: "#0091ff",
							width: 6,
						}]
					},
					fail: (err) => {
						console.log('err:',err)
					}
				})
			},
			//点击标记时
			handleMarker(e) {
				console.log(e.detail)
				this._mapContext.openMapApp()
			},
			// 导航 会打开导航菜单供用户选择
			openNavigation(longitude, latitude, name) {
				console.log('longitude:', longitude)
				console.log('latitude:', latitude)
				console.log('name:', name)
				let url = ""; // app url

				let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url

				plus.nativeUI.actionSheet({ //选择菜单
					title: "选择地图应用",
					cancel: "取消",
					buttons: [{
						title: "高德地图"
					}] // 可选的地图类型
				}, (e) => {
					// 判断用户选择的地图
					switch (e.index) {
						//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
						case 1:
							// 安卓
							if (plus.os.name == "Android") {
								url =
									`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
							} else {

								url =
									`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
							}
							webUrl =
								`https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`
							break;
					}
					// 如果选中
					if (url != "") {
						url = encodeURI(url);
						// 打开 app 导航 
						plus.runtime.openURL(url, (err) => { // 失败回到
							// 如果失败则说明未安装 直接 打开网页版进行导航
							// 毕竟用户可能没有安装app但一定安装的有浏览器
							plus.runtime.openURL(webUrl);
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-body {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
	}

	.guide-box {
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		box-shadow: 0 0 6px #dddddd;
		background-color: #fff;
		overflow: hidden;
	}

	.guide-list {
		// position: absolute;
		// bottom: 0;
		width: 100%;
		z-index: 9999;
		// max-height: 40vh;
		color: #000;
		// overflow-y: scroll;
		display: flex;
		margin-top: 0;
	}

	.item {
		background-image: linear-gradient(to bottom, #ededed, #fff);
		flex: 1;
		padding: 30rpx 0;
		height: 300rpx;
	}

	.on {
		background-color: #fff;
		background-image: none;
		color: #10beca;
	}

	.cell {
		text-align: center;
	}

	.type {
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}

	// 导航步骤
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>
